<template>
	<view class="store-detail-container page-container">
		<!-- 门店头图 -->
		<view class="store-header">
			<image :src="$tools.buildUrl(storeInfo.main_images)" mode="aspectFill" class="store-image"></image>
			<view class="store-overlay">
				<text class="store-name">{{ storeInfo.store_name }}</text>
				<view class="store-status" :class="storeInfo.is_open_now===1?'open':'closed'">
					{{ storeInfo.is_open_now===1?'营业中':'已打烊' }}
				</view>
			</view>
		</view>

		<!-- 门店信息 -->
		<view class="store-info-section">
			<view class="info-item">
				<u-icon name="map" size="20" color="#52a58a"></u-icon>
				<view class="info-content">
					<text class="info-label">门店地址</text>
					<text class="info-value">{{ storeInfo.address }}</text>
				</view>
			</view>
			<view class="info-item">
				<u-icon name="phone" size="20" color="#52a58a"></u-icon>
				<view class="info-content">
					<text class="info-label">联系电话</text>
					<text class="info-value">{{ storeInfo.contact }}</text>
				</view>
			</view>
			<view class="info-item">
				<u-icon name="clock" size="20" color="#52a58a"></u-icon>
				<view class="info-content">
					<text class="info-label">营业时间</text>
					<text class="info-value">{{ storeInfo.businessHours }}</text>
				</view>
			</view>
		</view>

		<!-- 门店介绍 -->
		<view class="store-intro-section">
			<view class="section-title">门店介绍</view>
			<text class="intro-text">{{ storeInfo.main_desc }}</text>
		</view>

		<!-- 门店服务 -->
		<view class="store-services-section">
			<view class="section-title">门店服务</view>
			<view class="services-grid">
				<view class="service-item" v-for="service in services" :key="service.id">
					<u-icon :name="service.icon" size="24" color="#52a58a"></u-icon>
					<text class="service-name">{{ service.name }}</text>
				</view>
			</view>
		</view>

		<!-- 门店环境 -->
		<view class="store-gallery-section" v-if="storeInfo.main_images && storeInfo.main_images.length > 0">
			<view class="section-title">门店环境</view>
			<view class="gallery-grid">
				<image v-for="(image, index) in storeInfo.main_images" :key="index" :src="$tools.buildUrl(image)"
					mode="aspectFill" class="gallery-image" @click="previewImage(index)"></image>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<button class="action-btn call-btn" @click="callStore">
				<u-icon name="phone-fill" size="20" color="#ffffff"></u-icon>
				<text class="btn-text">拨打电话</text>
			</button>
			<button class="action-btn nav-btn" @click="navigateToStore">
				<u-icon name="map-fill" size="20" color="#ffffff"></u-icon>
				<text class="btn-text">导航到店</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeId: '',
				storeInfo: {},
				services: [{
						id: 1,
						name: '茶叶品鉴',
						icon: 'coffee'
					},
					{
						id: 2,
						name: '茶艺表演',
						icon: 'star'
					},
					{
						id: 3,
						name: '茶文化讲解',
						icon: 'chat'
					},
					{
						id: 4,
						name: '定制包装',
						icon: 'gift'
					},
					{
						id: 5,
						name: '免费停车',
						icon: 'car'
					},
					{
						id: 6,
						name: 'WiFi服务',
						icon: 'wifi'
					}
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.storeId = options.id
				this.loadStoreDetail()
			}
		},
		methods: {
			// 加载门店详情
			loadStoreDetail() {
				this.$api.good.GetUnlineStoreInfo({
					id: this.storeId
				}).then(res => {
					this.storeInfo = res.data
					this.storeInfo.day_map = this.$tools.parseJsonObject(this.storeInfo.day_map);
					this.storeInfo.main_images = this.$tools.parseJsonObject(this.storeInfo.main_images);
					// 营业时间，Key:用数字表示周几，{1:"12:00-16:00",2:"12:00-16:00",5:"19:00-02:00",6:"12:00-16:00",7:"12:00-16:00"}
					const today = new Date().getDay() + 1;
					if (this.storeInfo.day_map) {
						this.storeInfo.businessHours = this.storeInfo.day_map[today]
					}
				})
			},

			// 拨打电话
			callStore() {
				uni.makePhoneCall({
					phoneNumber: this.storeInfo.contact,
					fail: () => {
						uni.showToast({
							title: '拨号失败',
							icon: 'none'
						})
					}
				})
			},

			// 导航到门店
			navigateToStore() {
				uni.openLocation({
					latitude: this.storeInfo.latitude,
					longitude: this.storeInfo.longitude,
					name: this.storeInfo.store_name,
					address: this.storeInfo.address,
					fail: () => {
						uni.showToast({
							title: '导航失败',
							icon: 'none'
						})
					}
				})
			},

			// 预览图片
			previewImage(index) {
				uni.previewImage({
					urls: this.storeInfo.main_images,
					current: index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-detail-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
	}

	.store-header {
		position: relative;
		height: 400rpx;
	}

	.store-image {
		width: 100%;
		height: 100%;
	}

	.store-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
		padding: 60rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.store-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #ffffff;
		flex: 1;
		margin-right: 20rpx;
	}

	.store-status {
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.store-status.open {
		background-color: #d4edda;
		color: #155724;
	}

	.store-info-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.info-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		gap: 20rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-content {
		flex: 1;
	}

	.info-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
		display: block;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		display: block;
	}

	.store-intro-section,
	.store-services-section,
	.store-gallery-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
	}

	.intro-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}

	.services-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
	}

	.service-name {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
	}

	.gallery-image {
		width: 100%;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #eee;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		gap: 16rpx;
	}

	.action-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		border: none;
		border-radius: 20rpx;
		padding: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	.call-btn {
		background-color: #52a58a;
		color: #ffffff;
	}

	.nav-btn {
		background-color: #52a58a;
		color: #ffffff;
	}

	.btn-text {
		color: inherit;
	}
</style>